<template>
	<!-- 优惠券组 -->
	<view class="diy-coupon" v-if="dataList.length" :style="[{'background': background }, {'padding-top': paddingTop},{'padding-left':paddingLeft},{'padding-right':paddingLeft},{'padding-bottom': paddingTop}]">

		<scroll-view scroll-x="true">
			<view class="coupon-wrapper" v-for="(dataItem,index) in dataList" :key="dataItem.coupon_id">
				<!-- <view class="coupon-item color__{{ dataItem.state.value ? dataItem.color.text : 'gray' }}"> -->

				<view class="coupon-item" :class="['color__' + dataItem.color.text]">

					<!-- <view class="coupon-item color__gray"> -->
					<i class="before" :style="[{'background': background }]"></i>c
					<view class="left-content dis-flex flex-dir-column flex-x-center flex-y-center">
						<view class="content-top">
							<block v-if="dataItem.coupon_type.value == 10">
								<text class="f-30">￥</text>
								<text class="price">{{ dataItem.reduce_price }}</text>
							</block>
							<text class="price" v-if="dataItem.coupon_type.value == 20">{{ dataItem.discount }}折</text>
						</view>
						<view class="content-bottom">
							<text class="f-22">满{{ dataItem.min_price }}元可用</text>
						</view>
					</view>
					<view class="right-receive dis-flex flex-x-center flex-y-center" @tap="receiveTap" :data-index="index" :data-state="dataItem.state.value"
					 :data-coupon-id="dataItem.coupon_id">
						<view v-if="dataItem.state.value" class="dis-flex flex-dir-column">
							<text>立即</text>
							<text>领取</text>
						</view>
						<view v-else class="state">
							<text>{{ dataItem.state.text }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		computed: {
			paddingTop() {
				return uni.upx2px(this.itemStyle.paddingTop * 2) + 'px';
			},
			background() {
				return this.itemStyle.background;
			},
			paddingLeft() {
				return uni.upx2px(0) + 'px';
			},
			background() {
				return this.itemStyle.background;
			},
		},
		props: {
			// itemIndex:{},
			itemStyle: {},
			params: {},
			dataList: {}
		},
		methods: {
			/**
			 * 领取优惠券
			 */
			receiveTap: function(e) {
				let _this = this,
					dataset = e.currentTarget.dataset;
				if (!dataset.state) {
					return false;
				}
				// 无法识别的JS错误,uni-app中弃用
				// _this._post_form('user.coupon/receive', {
				// 	coupon_id: dataset.couponId
				// }, function(result) {
				// 	_this.showSuccess(result.msg);
				// 	_this.setData({
				// 		['dataList[' + dataset.index + '].state']: {
				// 			value: 0,
				// 			text: '已领取'
				// 		}
				// 	});
				// });
				this.navigationTo({
					//只能跳转到程序内页面
					url:'pages/coupon/coupon'
				});
			},

		}
	}
</script>

<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	.diy-coupon {
		white-space: nowrap;
		font-size: 0;
	}

	.diy-coupon .coupon-item {
		width: 350upx;
		height: 130upx;
		position: relative;
		color: #fff;
		overflow: hidden;
		box-sizing: border-box;
	}

	.diy-coupon .coupon-item i.before {
		content: "";
		position: absolute;
		z-index: 1;
		width: 40upx;
		height: 40upx;
		top: 50%;
		left: -.8rem;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		-webkit-border-radius: 80%;
		border-radius: 80%;
		background-color: #fff;
	}

	.diy-coupon .coupon-wrapper {
		display: inline-block;
		padding: 0 12upx;
	}

	.diy-coupon .coupon-item .left-content {
		position: relative;
		width: 70%;
		height: 100%;
		background-color: #e5004f;
		float: left;
	}

	.diy-coupon .coupon-item .left-content .content-top .price {
		font-size: 44upx;
	}

	.diy-coupon .coupon-item.color__blue .left-content {
		background: linear-gradient(-125deg, #57bdbf, #2f9de2);
	}

	.diy-coupon .coupon-item.color__red .left-content {
		background: linear-gradient(-128deg, #ff6d6d, #ff3636);
	}

	.diy-coupon .coupon-item.color__violet .left-content {
		background: linear-gradient(-113deg, #ef86ff, #b66ff5);
	}

	.diy-coupon .coupon-item.color__yellow .left-content {
		background: linear-gradient(-141deg, #f7d059, #fdb054);
	}

	.diy-coupon .coupon-item.color__gray .left-content {
		background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
	}

	.diy-coupon .coupon-item.color__gray .right-receive {
		background-color: #949494;
	}

	.diy-coupon .coupon-item .right-receive {
		width: 30%;
		height: 100%;
		background-color: #4e4e4e;
		text-align: center;
		float: right;
	}

	.diy-coupon .coupon-item .right-receive text {
		font-size: 26upx;
	}
</style>
